<ul class="nav nav-pills m-2">
  <li class="nav-item">
    <a class="nav-link active disableAjax" href="{{ url('/table/search', {'db': db, 'table': table, 'pos': 0}) }}">
      {{ get_icon('b_search', t('Table search'), false, false, 'TabsMode') }}
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link disableAjax" href="{{ url('/table/zoom-search', {'db': db, 'table': table}) }}">
      {{ get_icon('b_select', t('Zoom search'), false, false, 'TabsMode') }}
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link disableAjax" href="{{ url('/table/find-replace', {'db': db, 'table': table}) }}">
      {{ get_icon('b_find_replace', t('Find and replace'), false, false, 'TabsMode') }}
    </a>
  </li>
</ul>

<form method="post" action="{{ url('/table/search') }}" name="insertForm" id="tbl_search_form" class="ajax lock-page">
  {{ get_hidden_inputs(db, table) }}
  <input type="hidden" name="goto" value="{{ goto }}">
  <input type="hidden" name="back" value="{{ url('/table/search') }}">

  <div class="card">
    <div class="card-header">{{ t('Do a "query by example" (wildcard: "%")') }}</div>

    <div class="card-body">
      <div id="fieldset_table_qbe">
        <div class="table-responsive-md jsresponsive">
          <table class="table table-striped table-hover table-sm w-auto">
            <thead>
              <tr>
                {% if geom_column_flag %}
                  <th>{{ t('Function') }}</th>
                {% endif %}
                <th>{{ t('Column') }}</th>
                <th>{{ t('Type') }}</th>
                <th>{{ t('Collation') }}</th>
                <th>{{ t('Operator') }}</th>
                <th>{{ t('Value') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for column_index in column_names|keys %}
                <tr class="noclick">
                  {# If 'Function' column is present trying to change comment #}
                  {% if geom_column_flag %}
                    {# Displays 'Function' column if it is present #}
                    <td>
                      {% set geom_types = get_gis_datatypes() %}
                      {% if column_types[column_index] in geom_types %}
                        <select class="geom_func" name="geom_func[{{ column_index }}]">
                          {# get the relevant list of GIS functions #}
                          {% set funcs = get_gis_functions(column_types[column_index], true, true) %}
                          {% for func_name, func in funcs %}
                            {% set name = func['display'] is defined ? func['display'] : func_name %}
                            <option value="{{ name }}">
                              {{ name }}
                            </option>
                          {% endfor %}
                        </select>
                      {% endif %}
                    </td>
                  {% endif %}
                  {# Displays column's name, type, collation and value #}
                  <th>
                    {#- Keep this without extra spaces because it is used for a request to build the BETWEEN modal -#}
                    {{- column_names[column_index] -}}
                  </th>
                  <td dir="ltr">
                    {{ properties[column_index]['type'] }}
                  </td>
                  <td>
                    {{ properties[column_index]['collation'] }}
                  </td>
                  <td>
                    {{ properties[column_index]['func']|raw }}
                  </td>
                  {# here, the data-type attribute is needed for a date/time picker #}
                  <td data-type="{{ properties[column_index]['type'] }}">
                    {{ properties[column_index]['value']|raw }}
                    {# Displays hidden fields #}
                    <input type="hidden" name="criteriaColumnNames[{{ column_index }}]" value="{{ column_names[column_index] }}">
                    <input type="hidden" name="criteriaColumnTypes[{{ column_index }}]" value="{{ column_types[column_index] }}">
                    <input type="hidden" name="criteriaColumnCollations[{{ column_index }}]" value="{{ column_collations[column_index] }}">
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        {{ include('modals/gis_editor.twig') }}
      </div>

      {% if default_sliders_state != 'disabled' %}
      <div>
        <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#searchExtraOptions" aria-expanded="{{ default_sliders_state == 'open' ? 'true' : 'false' }}" aria-controls="searchExtraOptions">
          {{ t('Extra options') }}
        </button>
      </div>
      <div class="collapse mt-3{{ default_sliders_state == 'open' ? ' show' }}" id="searchExtraOptions">
      {% endif %}

        {# Displays columns select list for selecting distinct columns in the search #}
        <fieldset>
          <div class="mb-3">
            <label class="form-label" for="columnsToDisplaySelect">{{ t('Select columns (at least one):') }}</label>
            <select class="form-select resize-vertical" id="columnsToDisplaySelect" name="columnsToDisplay[]" size="{{ min(column_names|length, 10) }}" multiple>
              {% for each_field in column_names %}
                <option value="{{ each_field }}" selected>
                  {{ each_field }}
                </option>
              {% endfor %}
            </select>
          </div>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="distinct" value="DISTINCT" id="oDistinct">
            <label class="form-check-label" for="oDistinct" dir="ltr" lang="en">DISTINCT</label>
          </div>
        </fieldset>

        {# Displays input box for custom 'Where' clause to be used in the search #}
        <div class="mb-3">
          <label class="form-label" for="customWhereClauseInput">
            <em>{{ t('Or') }}</em>
            {{ t('Add search conditions (body of the "where" clause):') }}
            {{ show_mysql_docu('Functions') }}
          </label>
          <input class="form-control" id="customWhereClauseInput" type="text" name="customWhereClause" size="64">
        </div>

        {# Displays option of changing default number of rows displayed per page #}
        <div class="mb-3">
          <label class="form-label" for="maxRowsInput">{{ t('Number of rows per page') }}</label>
          <input class="form-control" id="maxRowsInput" type="number" name="session_max_rows" min="1" value="{{ max_rows }}" required>
        </div>

        {# Displays option for ordering search results by a column value (Asc or Desc) #}
        <fieldset>
          <legend class="visually-hidden">{{ t('Display order:') }}</legend>
          <div class="mb-3">
            <label class="form-label" for="orderByColumnSelect">{{ t('Order by:') }}</label>
            <select class="form-select" id="orderByColumnSelect" name="orderByColumn">
              <option value="--nil--" selected></option>
              {% for each_field in column_names %}
                <option value="{{ each_field }}">
                  {{ each_field }}
                </option>
              {% endfor %}
            </select>
          </div>

          <div class="form-check">
            <input class="form-check-input" type="radio" name="order" id="orderByAscRadio" value="ASC" checked>
            <label class="form-check-label" for="orderByAscRadio">{{ t('Ascending') }}</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="order" id="orderByDescRadio" value="DESC">
            <label class="form-check-label" for="orderByDescRadio">{{ t('Descending') }}</label>
          </div>
        </fieldset>
      {% if default_sliders_state != 'disabled' %}
      </div>
      {% endif %}
    </div>

    <div class="card-footer">
      <input class="btn btn-primary" type="submit" name="submit" value="{{ t('Go') }}">
    </div>
  </div>
</form>

<div class="modal fade" id="rangeSearchModal" tabindex="-1" aria-labelledby="rangeSearchModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rangeSearchModalLabel">{{ t('Range search') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
      </div>
      <div class="modal-body">
        <fieldset>
          <legend id="rangeSearchLegend"></legend>
          <label for="min_value">{{ t('Minimum value:') }}</label>
          <input type="text" id="min_value"><br>
          <span class="small_font" id="rangeSearchMin"></span><br>
          <label for="max_value">{{ t('Maximum value:') }}</label>
          <input type="text" id="max_value"><br>
          <span class="small_font" id="rangeSearchMax"></span>
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="rangeSearchModalGo">{{ t('Go') }}</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Cancel') }}</button>
      </div>
    </div>
  </div>
</div>

<div id="sqlqueryresultsouter"></div>
